<template>
  <view class="swiper-container">
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      interval="3000"
      circular
      indicator-color="rgba(255, 255, 255, 0.5)"
      indicator-active-color="#00ffff"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <view class="image-wrapper">
          <image :src="item" mode="aspectFill" class="swiper-image" />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  name: "Slideshow",
  data() {
    return {
      // 图片数组
      images: [
        '/static/1726643592831.jpg',
        '/static/1726643592831.jpg',
        '/static/1726643592838.jpg',
        '/static/1726643592838.jpg',
      ]
    };
  },
};
</script>
<style lang="scss">
	.swiper-container {
	  width: 100%;
	  height: 220px;
	  position: relative;
	  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0); /* 背景渐变 */
	  border-radius: 10px; /* 圆角 */
	  overflow: hidden;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	}
	
	.swiper {
	  width: 100%;
	  height: 100%;
	}
	
	.image-wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	}
	
	.swiper-image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* 防止图片拉伸变形 */
	  transition: transform 0.3s ease; /* 图片动画 */
	  border: 3px solid rgba(255, 255, 255, 0.5); /* 图片边框 */
	  border-radius: 10px; /* 圆角边框 */
	}
	
	.swiper-image:hover {
	  transform: scale(1.05); /* 鼠标悬停缩放效果 */
	}

</style>